<template>
       <swiper class="swiper" :options="swiperOption">
      <swiper-slide><img src="https://img1.baidu.com/it/u=586014488,2471432236&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683306000&t=ff5fc4ad764d1d0aef3a866ac435e444" alt=""></swiper-slide>
      <swiper-slide><img src="https://img1.baidu.com/it/u=586014488,2471432236&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683306000&t=ff5fc4ad764d1d0aef3a866ac435e444" alt=""></swiper-slide>
      <swiper-slide><img src="https://img1.baidu.com/it/u=586014488,2471432236&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683306000&t=ff5fc4ad764d1d0aef3a866ac435e444" alt=""></swiper-slide>
      <swiper-slide><img src="https://img1.baidu.com/it/u=586014488,2471432236&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1683306000&t=ff5fc4ad764d1d0aef3a866ac435e444" alt=""></swiper-slide>
     
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
</template>

<script>
// import axios from '@/api/axios';
import {ReqGetBaseCategoryList} from "@/api"
// import axios from "axios";
// import axios from '@/api/mockAxios';

import {Swiper,SwiperSlide} from "vue-awesome-swiper"
import "swiper/css/swiper.css"
    export default {
        name:"Test",
        // methods:{
        //     async demo(){
        //         // let result = await axios.get("/api/product/getBaseCategoryList")
        //         // console.log(result);
        //         let data=await ReqGetBaseCategoryList()
        //         console.log(data);
        //     }
        // }

        // async mounted(){
        // //     let result=await axios.get("模拟的url路径");
        // //     console.log(result.data);


        // let result = await axios.get("/slide");
        // let result1 = await axios.get("/floor");

        //     console.log(result);
        //     console.log(result1);
        // }
    components:{
        Swiper,
        SwiperSlide
    },
    data() {
        return {
          swiperOption: {
            slidesPerView: 1,   //设置展示数量
            spaceBetween: 30,  //间隔
            loop: true,   //循环
            pagination: {     //小圆点
              el: '.swiper-pagination',
              clickable: true
            },
            navigation: {  //上下页
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            }
          }
        }
      }
    }
       
    
    
</script>

<style lang="less" scoped>
.test{
    height: 300px;
    background: gainsboro;
}
.swiper{
    height: 500px;
    background: gainsboro;
    img{
        width: 100%;
    }
}
</style>